import React, { Children, useState, useEffect, useRef } from 'react'
import './Index.css'
import { Button, Drawer, Radio, Space, Tabs } from 'antd';
import type { DrawerProps, RadioChangeEvent, TabsProps } from 'antd';
import { Col, InputNumber, Row, Slider, InputNumberProps } from 'antd';
import { Grid, Form, Input } from 'react-vant';
//引入模板封装
import Mubai from  './MuBai'
//引入画笔封装
import Huabi from './huabi'
//引入样式封装
import Yangshi from './Yangshi'
//引入设计封装
import Sheji from './Sheji'
import { ShopO, Qr, SendGiftO, SendGift, Replay, Records, EcardPay, Bars, NewspaperO } from '@react-vant/icons'
import {
  ArrowLeftOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  ArrowRightOutlined,
  CheckCircleOutlined,
  FontSizeOutlined,
  DiffOutlined
  // SnippetsOutlined 
} from '@ant-design/icons';
import Chuan from './Chuan';

type TabPosition = 'left' | 'right' | 'top' | 'bottom';
const Index = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [open, setOpen] = useState(false);
  const [open1, setOpen1] = useState(false);
  const [value, setValue] = useState('');
 const [rotation, setRotation] = useState(0); // 旋转角度  
  const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
  const [inputValue, setInputValue] = useState(4);

  const [tabPosition, setTabPosition] = useState<TabPosition>('left');

  const [imgData, setimgData] = useState('');

  const onChange: InputNumberProps['onChange'] = (newValue) => {
    setInputValue(newValue as number);
  };
  const onChange6 = (key: string) => {
    console.log(key);
  };
  const onChange1 = (key: string) => {
    console.log(key);
  };
  const onChange2 = (key: string) => {
    console.log(key);
  };
  const onChange3 = (key: string) => {
    console.log(key);
  };
  const onChange4 = (key: string) => {
    console.log(key);
  };
  const onChange5 = (key: string) => {
    console.log(key);
  };
  const [form] = Form.useForm()
  const onFinish = (values: any) => {
    console.log(values)
  }

  //小的tabs切换
  const items1: TabsProps['items'] = [
    {
      key: '1',
      label: '模版',
      children: (
        <div style={{ width: "280px", height: "500px", overflowY: "scroll" }}>
          <div className='mbcss'>
            <span>小暑</span>
            <span>大暑</span>
            <span>喜报</span>
            <span>红色</span>
            <span>招聘</span>
          </div>
   
        <div>
          <Mubai></Mubai>
        </div>

        </div>
      ),
    },
    {
      key: '2',
      label: '样式',
      children: (
        <div style={{ width: "280px", height: "500px", overflowY: "scroll" }}>
          <div className='mbcss'>
            <span>传统</span>
            <span>中国风</span>
            <span>古风</span>
            <span>国潮</span>
            <span>当代</span>
          </div>
    
        <div><Yangshi></Yangshi></div>

        </div>
      ),
    },

  ];
  //上传的切换
  const items2: TabsProps['items'] = [
    {
      key: '1',
      label: '图片',
      children: '将桌面上的图片文件拖到此处',
    },
    {
      key: '2',
      label: '视频',
      children: '将桌面上的视频文件拖到此处',
    },
    {
      key: '3',
      label: '音频',
      children: '将桌面上的音频文件拖到此处',
    },
  ];
  //项目的切换
  const items3: TabsProps['items'] = [
    {
      key: '1',
      label: '全部',
      children: (
        <div>
          <div className='sheji'>
            <h3>设计</h3>
            <p>查看全部</p>
          </div>
          <div className='mbimg' style={{ overflowY: "scroll", height: '300px' }}>
            <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
            <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
            <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
            <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
            <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
            <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
          </div>


        </div>
      ),
    },
    {
      key: '2',
      label: '设计',
      children: (
        <div><Sheji></Sheji></div>
      ),
    },
    {
      key: '3',
      label: '文件夹',
      children: (
        <div className='wenjian'>
          <button>创建文件夹</button>
          <button>已添加星标</button>
        </div>
      ),
    },
  ];
  //应用的切换
  const items4: TabsProps['items'] = [
    {
      key: '1',
      label: '发现',
      children: '来自Canva的更多内容',
    },
    {
      key: '2',
      label: '你的应用',
      children: '当前没有使用过的应用',
    },

  ];
  //视频的切换
  const items5: TabsProps['items'] = [
    {
      key: '1',
      label: '科技',
      children: '科技内容',
    },
    {
      key: '2',
      label: '风景',
      children: '风景内容',
    },
    {
      key: '3',
      label: '荷花',
      children: '荷花内容',
    },
    {
      key: '4',
      label: '雨',
      children: '雨的内容',
    },
    {
      key: '5',
      label: '山',
      children: '山的内容',
    },

  ];



  //大的tabs切换
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: (
        <div className='sx'>
          <SendGiftO />
          <span>设计</span>

        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索1080x1920像素模板' style={{ width: '80%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>
          <div>
            <Tabs defaultActiveKey="1" items={items1} onChange={onChange1} />
          </div>



        </div>
      ),
    },
    {
      key: '2',
      label: (
        <div className='sx'>
          <Qr />
          <span>素材</span>
        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索插画/图片/动画/音频......' style={{ width: '80%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>

          <div className='mbcss' style={{ marginTop: '10px' }}>
            <span>长方形</span>
            <span>横线</span>
            <span>电话</span>
            <span>虚线</span>
            <span>Logo</span>
          </div>
          <div>
            <h3>最近使用</h3>
            {/* 拖拽的素材照片 */}
            <img src="https://img2.woyaogexing.com/2024/07/25/0de3b3c76a0a8558ac7ff427c66675f6.png" draggable alt="" style={{ width: '100px', height: '100px' }}  onDragStart={() => {
              setimgData('https://img2.woyaogexing.com/2024/07/25/0de3b3c76a0a8558ac7ff427c66675f6.png')
            }} />
            <img src="https://img2.woyaogexing.com/2024/07/22/1db4784cd07c52b60cefc5f3cc67b049.png" draggable alt="" style={{ width: '100px', height: '100px', marginTop: '20px' }} onDragStart={() => {
              setimgData('https://img2.woyaogexing.com/2024/07/22/1db4784cd07c52b60cefc5f3cc67b049.png')
            }} />
            <img src="https://img2.woyaogexing.com/2024/07/21/9f5cdcb8b20d89b4c33828cdb01101bb.png" alt="" style={{ width: '100px', height: '100px', marginTop: '20px' }} onDragStart={() => {
              setimgData('https://img2.woyaogexing.com/2024/07/21/9f5cdcb8b20d89b4c33828cdb01101bb.png')
            }} />
            <img src="https://img2.woyaogexing.com/2024/06/29/00284e82f994da9e7b60e936129cd5b6.jpg" draggable alt="" style={{ width: '100px', height: '100px', marginTop: '20px' }} onDragStart={() => {
              setimgData('https://img2.woyaogexing.com/2024/06/29/00284e82f994da9e7b60e936129cd5b6.jpg')
            }} />
            <img src="https://img2.woyaogexing.com/2024/06/29/34f542da7d556e80ffb90687156694af.jpg" draggable alt="" style={{ width: '100px', height: '100px', marginTop: '20px' }} onDragStart={() => {
              setimgData('https://img2.woyaogexing.com/2024/06/29/34f542da7d556e80ffb90687156694af.jpg')
            }} />
            <img src="https://img2.woyaogexing.com/2024/06/29/9bd46583cffd757086ee37c879403133.jpg" draggable alt="" style={{ width: '100px', height: '100px', marginTop: '20px' }} onDragStart={() => {
              setimgData('https://img2.woyaogexing.com/2024/06/29/9bd46583cffd757086ee37c879403133.jpg')
            }} />

          </div>
          <div>
            <div className='yuan'>
              <span>形状</span>
              <span>查看全部</span>
            </div>
            <div className='yuantu'>
              <span style={{ width: '50px', height: '50px', borderRadius: '10px', background: 'pink', border: '1px solid #ccc' }}

              ></span>
              <span style={{ width: '60px', height: '60px', borderRadius: '50%', background: '#fff' }}></span>
              <span>——</span>
              <span>——→</span>
              <span className='san'></span>

            </div>

          </div>

          <div>
            <div className='yuan'>
              <span>插画</span>
              <span>查看全部</span>
            </div>
            <div className='yuantu'>
              <span style={{ width: '50px', height: '50px', borderRadius: '10px', background: '#fff', border: '1px solid #ccc' }}></span>
              <span style={{ width: '60px', height: '60px', borderRadius: '50%', background: '#fff' }}></span>
              <span>——</span>
              <span>——→</span>
              <span className='san'></span>

            </div>

          </div>
          <div>
            <h4>AI图片生成器</h4>
          </div>


        </div>
      ),
    },
    {
      key: '3',
      label: (
        <div className='sx'>
          <FontSizeOutlined />
          <span>文字</span>
        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索文字组合' style={{ width: '90%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>
          <button style={{ width: '90%', height: '40px', lineHeight: '40px', textAlign: 'center', background: 'rgb(151, 11, 232)', borderRadius: '10px', marginTop: '10px' }}>添加文本框</button>

          <div className='pinpai'>
            <p>品牌工具箱</p>
            <p>编辑</p>
          </div>
          <div style={{ width: '90%', height: '40px', lineHeight: '40px', textAlign: 'center', border: '1px solid #ccc', borderRadius: '10px' }}>设置你的品牌字体</div>
          <h3 style={{ textAlign: 'left' }}>默认字体样式</h3>
          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '26px'
          }}>添加标题</div>

          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>添加福标题</div>

          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '14px', marginTop: '15px'
          }}>添加一小段正文文字</div>
          <h4 style={{ textAlign: 'left' }}>字体组合</h4>
          <div style={{ width: '100%', height: '400px', overflowY: "scroll" }}>
            <div className='mbimg ziti'>
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/22/1db4784cd07c52b60cefc5f3cc67b049.png" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg" alt="" />
              <img src="https://img2.woyaogexing.com/2024/07/04/61ec411ff174849bb5f612184ac477a9.jpg" alt="" />

            </div>
          </div>


        </div>
      ),
    },
    {
      key: '4',
      label: (
        <div className='sx'>
          <SendGift />
          <span>品牌</span>
        </div>
      ),
      children: (
        <div>
          <h2 style={{ textAlign: 'left' }}>品牌模版</h2>
          <div style={{
            width: '90%', height: '70px', lineHeight: '70px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>设置成可用的模板</div>


          <h2 style={{ textAlign: 'left' }}>品牌工具箱</h2>
          <div style={{
            width: '90%', height: '70px', lineHeight: '70px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>品牌语言</div>

          <h3 style={{ textAlign: 'left' }}>logo</h3>
          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>升级并添加logo</div>

          <h3 style={{ textAlign: 'left' }}>颜色</h3>
          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>添加品牌颜色</div>

          <h3 style={{ textAlign: 'left' }}>字体</h3>
          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>升级并添加字体</div>

          <h3 style={{ textAlign: 'left' }}>品牌调性</h3>
          <div style={{
            width: '90%', height: '40px', lineHeight: '40px', textAlign: 'left', border: '1px solid #ccc', borderRadius: '10px', paddingLeft: '10px',
            fontSize: '16px', marginTop: '15px'
          }}>升级并添加logo</div>

        </div>
      ),
    },
    {
      key: '5',
      label: (
        <div className='sx'>
          <Replay />
          <span>上传</span>
        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索图片' style={{ width: '90%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>

          <button style={{ width: '90%', height: '40px', lineHeight: '40px', textAlign: 'center', background: 'rgb(151, 11, 232)', borderRadius: '10px', marginTop: '10px' }}>上传文件</button>
          <button style={{ width: '90%', height: '40px', lineHeight: '40px', textAlign: 'center', border: '1px solid #ccc', background: '#000', borderRadius: '10px', marginTop: '10px' }}>打开摄像头录制自己</button>
          <div>
            <Tabs defaultActiveKey="1" items={items2} onChange={onChange2} />
          </div>
          <div> <Chuan></Chuan></div>
       
        </div>
      ),
    },
    {
      key: '6',
      label: (
        <div className='sx'>
          <Records />
          <span>画笔</span>
        </div>
      ),
      children: (
        <div>
          <Huabi></Huabi>
        </div>
      ),
    },
    {
      key: '7',
      label: (
        <div className='sx'>
          <EcardPay />
          <span>项目</span>
        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索你的设计/图片/视频...' style={{ width: '90%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>
          <div className='sou'>
            <input type="text" placeholder='我的项目' style={{ width: '90%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>


          <div> <Tabs defaultActiveKey="1" items={items3} onChange={onChange3} /></div>

        </div>
      ),
    },
    {
      key: '8',
      label: (
        <div className='sx'>
          <EcardPay />
          <span>应用</span>
        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索更多应用工具' style={{ width: '90%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>
          <div> <Tabs defaultActiveKey="1" items={items4} onChange={onChange4} /></div>

        </div>
      ),
    },
    {
      key: '9',
      label: (
        <div className='sx'>
          <Bars />
          <span>视频</span>
        </div>
      ),
      children: (
        <div>
          <div className='sou'>
            <input type="text" placeholder='搜索视频' style={{ width: '90%', borderRadius: '10px', paddingLeft: '5px', marginTop: '20px' }} />
          </div>

          <button style={{ width: '90%', height: '40px', lineHeight: '40px', textAlign: 'center', background: 'rgb(151, 11, 232)', borderRadius: '10px', marginTop: '10px' }}>打开摄像头录制自己</button>
          <div> <Tabs defaultActiveKey="1" items={items5} onChange={onChange5} /></div>
        </div>
      ),
    },

  ];

  //打开抽屉
  const showDrawer = () => {
    setOpen(true);
  };

  //关闭抽屉
  const onClose = () => {
    setOpen(false);
  };

  const onClose1 = () => {
    setOpen1(false);
  };

  //左侧数据

  // const list: any[] = [
  //   {
  //     id: 1,
  //     title: '设计',
  //     icon: <SendGiftO />,
  //     child: [
  //       {
  //         id: 11,
  //         title: "模板",
  //         "children": [
  //           {
  //             "id": 80,
  //             "img": "https://img2.woyaogexing.com/2024/07/10/0cef8b9051b66501e20420dbbc13b0fd.jpg",
  //             "title": "设计"
  //           },
  //           {
  //             "id": 81,
  //             "img": "https://img2.woyaogexing.com/2024/07/22/1db4784cd07c52b60cefc5f3cc67b049.png",
  //           },
  //           {
  //             "id": 82,
  //             "img": "https://img2.woyaogexing.com/2024/07/06/687a9057701cfb44ea6e7ce5713d6d46.jpg"
  //           },
  //           {
  //             "id": 83,
  //             "img": "https://img2.woyaogexing.com/2024/07/04/61ec411ff174849bb5f612184ac477a9.jpg"
  //           }
  //         ]
  //       },
  //       {
  //         "id": 12,
  //         "title": "样式",
  //         "children": [

  //           {
  //             "id": 72,
  //             "img": "https://img2.woyaogexing.com/2024/07/06/687a9057701cfb44ea6e7ce5713d6d46.jpg"
  //           },
  //           {
  //             "id": 73,
  //             "img": "https://img2.woyaogexing.com/2024/07/04/61ec411ff174849bb5f612184ac477a9.jpg"
  //           }
  //         ]
  //       },

  //     ]

  //   },
  //   {
  //     id: 2,
  //     title: '素材',
  //     icon: <Qr />,
  //     child: [
  //       {
  //         id: 11,
  //         title: "长方形",
  //         children: [

  //           {
  //             id: 62,
  //              img: "https://img2.woyaogexing.com/2024/07/06/687a9057701cfb44ea6e7ce5713d6d46.jpg"
  //           },
  //           {
  //             "id": 63,
  //             "img": "https://img2.woyaogexing.com/2024/07/04/61ec411ff174849bb5f612184ac477a9.jpg"
  //           }
  //         ]
  //       },
  //       {
  //         "id": 12,
  //         "title": "横线",
  //         "children": [

  //           {
  //             "id": 93,
  //             "img": "https://img2.woyaogexing.com/2024/07/04/61ec411ff174849bb5f612184ac477a9.jpg"
  //           }
  //         ]
  //       },

  //     ]

  //   },
  //   {
  //     id: 3,
  //     title: '文字',
  //     icon: <FontSizeOutlined />,

  //   },
  //   {
  //     id: 4,
  //     title: '品牌',
  //     icon: <SendGift />,

  //   },
  //   {
  //     id: 5,
  //     title: '上传',
  //     icon: <Replay />,

  //   },
  //   {
  //     id: 6,
  //     title: '画笔',
  //     icon: <Records />,

  //   },
  //   {
  //     id: 7,
  //     title: '项目',
  //     icon: <EcardPay />,

  //   },
  //   {
  //     id: 8,
  //     title: '应用',
  //     icon: <Bars />,


  //   },
  //   {
  //     id: 9,
  //     title: '视频',
  //     icon: <EcardPay />,

  //   }

  // ]


  //拖拽
  const koa = useRef(null) as any
  const headerider = (e: any) => {
    e.preventDefault();
  }
  const hader = (e: any) => {
    e.preventDefault();
    const res = koa.current?.getBoundingClientRect()
    if (!res) return
    const x = e.pageX - res.left - 200 / 2
    const y = e.pageY - res.top - 200 / 2
    const image = document.createElementNS('http://www.w3.org/2000/svg', "image")
    image.setAttributeNS(null, "href", `${imgData}`)
    image.setAttributeNS(null, 'x', `${x}`)
    image.setAttributeNS(null, 'y', `${y}`)
    image.setAttributeNS(null, 'width', "200")
    image.setAttributeNS(null, 'height', "200")
    koa.current.appendChild(image)
  }


  return (
    <div className='box'>
      {/* 顶部排版加抽屉 */}
      <div className='tou' >
        <div>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={showDrawer}
            style={{

              width: 64,
              height: 64,
            }}
          />
          <img alt="" />
          <span className='wj'>文件</span>
          <span>调整尺寸和魔力转换</span>
          <span><ArrowLeftOutlined></ArrowLeftOutlined></span>
          <span><ArrowRightOutlined /></span>
          <span><CheckCircleOutlined /></span>
        </div>

        <div className='you'>
          <span>新人半价</span>
          <img src={require('../../img/aa.jpg')} alt="" />
          <button>导出</button>
        </div>

      </div>

      <div className='main' >
        <div className="zuo">
          <Tabs defaultActiveKey="1" items={items} onChange={onChange6} tabPosition={tabPosition} />

        </div>

        <div className="right" style={{ marginLeft: open1 ? 410 : 0, transition: 'margin-left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms', background: "#ccc", borderRadius: "15px", width: "100%", height: "750px" }}>
          <div className='rs'>
            <h5>调整位置</h5>
          </div>
          {/* 画布 */}
          <div className='resizable-canvas' >
            <svg ref={koa} width={400 * inputValue / 5} height={400 * inputValue / 5} style={{ background: '#fff' }} onDragOver={headerider} onDrop={hader}>
            </svg>

            <Button onClick={() => {
              const ass = document.createElementNS("http://www.w3.org/2000/svg", "svg");
              ass.setAttribute("width", `300`)
              ass.setAttribute("height", `300`)
              ass.setAttribute("class", "add")
              document.querySelector('.resizable-canvas')?.appendChild(ass)
              console.log(ass, 'sss')
            }} style={{ width: '20%', height: '40px', background: '#ccc', border: '1px solid #fff', marginTop: '10px' }}>
              +添加页面
            </Button>
          </div>

          {/* 底部进度条 */}
          <div className='bottomprocess' >
            <Row>
              <Col span={10} style={{ marginLeft: '200px', marginTop: '100px' }}>
                <Slider
                  min={1}
                  max={10}
                  onChange={onChange}
                  value={typeof inputValue === 'number' ? inputValue : 0}
                />
              </Col>
              <Col span={4}>
                <InputNumber
                  min={1}
                  max={10}
                  style={{ margin: '0 16px' }}
                  value={inputValue}
                  onChange={onChange}
                />
              </Col>
            </Row>
          </div>


          <div className='mainright' style={{ width: '300px', height: '500px'}}>
            <Form
              form={form}
              onFinish={onFinish}
              footer={
                <div style={{ margin: '16px 16px 0' }}>
                  <Button style={{ width: '80%',  background:'blue', color:'#fff',borderRadius:'10px'}}>
                    提交
                  </Button>
                </div>
              }
            >
              <Form.Item

                label='宽'
       
              >
                <Input placeholder='请输入宽' />
              </Form.Item>

              <Form.Item

                label='高'
              
              >
                <Input placeholder='请输入高' />
              </Form.Item>

              <Form.Item

                label='颜色'
             
              >
                <Input placeholder='请输入颜色' />
              </Form.Item>

              <Form.Item

                label='X轴'
          
              >
                <Input placeholder='请输入X轴' />
              </Form.Item>

              <Form.Item

                label='Y轴'
            
              >
                <Input placeholder='请输入Y轴' />
              </Form.Item>

                 <Form.Item

                label='层次'
           
              >
                <Input placeholder='请输入层次' />
              </Form.Item>

                 <Form.Item

                label='角度'
           
              >
                <Input placeholder='请输入角度' />
              </Form.Item>

                 <Form.Item

                label='字体颜色'
           
              >
                <Input placeholder='请输入字体颜色' />
              </Form.Item>

                 <Form.Item

                label='字体大小'
          
              >
                <Input placeholder='请输入字体大小' />
              </Form.Item>

                 <Form.Item

                label='内容'
              
              >
                <Input placeholder='请输入内容' />
              </Form.Item>



            </Form>

          </div>
        </div>
      </div>


      <Drawer placement='left' onClose={onClose} open={open}>
        <div style={{ display: "flex", flexDirection: "column" }} className='tan'>
          <img src={require('../../img/kehua.png')} alt="" />
          <button>+   创建设计</button>

          <span><Grid.Item icon={<NewspaperO />} />首页</span>

          <p className='liang'>
            <span className='sj'>最近设计</span>
            <span className='qb'>查看全部</span>
          </p>
          <div className='xuan'>
            <p><input type="checkbox" />未命名的设计</p>
            <p><input type="checkbox" />未命名的设计</p>
            <p><input type="checkbox" />未命名的设计</p>
            <p><input type="checkbox" />开始使用Canva可画</p>
            <p><input type="checkbox" />未命名的设计</p>
            <p><input type="checkbox" />橙白色课堂笔记简约企业分......</p>
          </div>
        </div>

      </Drawer>
    </div>
  )
}

export default Index
